<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel="stylesheet">
  <style>
    .hljs ul {
      list-style: decimal;
      margin: 0 0 0 40px!important;
      padding: 0
    }

    .hljs li {
      list-style: decimal-leading-zero;
      border-left: 1px solid #111!important;
      padding: 2px 5px!important;
      margin: 0!important;
      line-height: 14px;
      width: 100%;
      box-sizing: border-box
    }

    .hljs li:nth-of-type(even) {
      background-color: rgba(255,255,255,.015);
      color: inherit
    }
  </style>
  <title>Document</title>
</head>
<body>

<div class="code-box" style="width:400px">
<pre>
  <code>let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')</code>
</pre>
</div>


<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<script type="text/javascript">
  //不放在setTimeout里, 会报:
  //highlight.min.js:258 One of your code blocks includes unescaped HTML. This is a potentially serious security risk.
  //https://github.com/highlightjs/highlight.js/issues/2886

  setTimeout(() => {
    const allCodeBlocks = document.querySelectorAll("code");
    console.log('allCodeBlocks:',allCodeBlocks);

    for (let i = 0; i < allCodeBlocks.length; i++) {
      console.log(11111111111);
      const highlightWithLineNumbers = "<ul><li>" + allCodeBlocks[i].innerHTML.replace(/\n/g, "\n</li><li>") + "\n</li></ul>";
      console.log('highlightWithLineNumbers:', highlightWithLineNumbers);
      allCodeBlocks[i].innerHTML = highlightWithLineNumbers;
    }
  },30);
</script>
</body>
</html>
